<template>
  <view class="index-page">
    <u-navbar
      title="我的邀请数据"
      :background="{ background: '#111723' }"
      back-icon-color="#fff"
      title-color="#fff"
      :title-bold="true"
      :border-bottom="false"
    ></u-navbar
  ></view>
  <view class="top-content">
    <u-image
      width="100%"
      height="130px"
      src="http://starts-hiding-public.oss-cn-qingdao.aliyuncs.com//uploads/20221011/dd5049155ce20e95d50d579c3fe40bd9.jpeg"
    ></u-image>
    <view class="main-c">
      <view class="top">星藏邀请中心</view>
      <view style="display: flex; align-items: center; margin: 25rpx 0">
        <view style="margin-right: 20rpx">
          <u-icon name="account"></u-icon> 实名：{{
            state.inviteRuleInfo.real_count
          }}人</view
        >
        <view style="margin-right: 20rpx">
          <u-icon name="red-packet"></u-icon> 付费：{{
            state.inviteRuleInfo.pay_count
          }}人</view
        >
        <view>
          <u-icon name="chat-fill"></u-icon> 活跃：{{
            state.inviteRuleInfo.active_count
          }}人</view
        >
      </view>
      <view>
        <u-icon name="clock"></u-icon
        ><text style="color: #919191">2020~2021</text>
      </view>
      <view class="button">
        <u-button
          style="width: 90%"
          :ripple="true"
          size="mini "
          shape="circle"
          @click="invite"
          :custom-style="state.customStyle"
          >立即邀请</u-button
        ></view
      >
    </view>
  </view>
  <view class="bottom-content">
    <u-tabs
      bg-color="#f3f6fd"
      item-width="50%"
      :list="state.olist"
      active-color="#111723"
      v-model="state.tabCurrent"
      @change="change"
    ></u-tabs>
    <scroll-view
      class="scrool"
      :style="{ height: '920rpx' }"
      :scroll-y="true"
      lower-threshold="30"
      @scrolltolower="bottomOut()"
    >
      <view class="percent" v-for="(item, index) in state.list" :key="index">
        <view v-if="state.tabCurrent === 0">
          <u-image
            v-if="index === 0"
            style="margin-right: 30rpx"
            src="@/static/images/paihang3.png"
            width="70rpx"
            height="70rpx"
          ></u-image>
          <u-image
            v-if="index === 1"
            style="margin-right: 30rpx"
            src="@/static/images/paihang4.png"
            width="70rpx"
            height="70rpx"
          ></u-image>
          <u-image
            v-if="index === 2"
            style="margin-right: 30rpx"
            src="@/static/images/paihang5.png"
            width="70rpx"
            height="70rpx"
          ></u-image>
          <view
            v-if="index > 2"
            style="
              margin: 0 50rpx 0 30rpx;
              text-align: center;
              font-weight: 600;
            "
            >{{ index + 1 }}</view
          >
        </view>
        <view
          v-else
          style="margin: 0 50rpx 0 30rpx; text-align: center; font-weight: 600"
          >{{ index + 1 }}</view
        >
        <u-image
          style="margin-right: 30rpx"
          :src="item.avatar"
          width="70rpx"
          height="70rpx"
          shape="circle"
        ></u-image>
        <view class="text">
          <view
            style="
              font-size: 30rpx;
              font-weight: 600;
              display: flex;
              align-items: center;
            "
            >{{ item.nickname }}
            <text class="pre">{{
              item.is_real === 1 ? '已实名' : '未实名'
            }}</text>
          </view>
          <view v-if="state.tabCurrent === 0" class="bottom-text"
            >已邀请: {{ item.invite_count }} 人
          </view>
        </view>
      </view>
      <u-loadmore
        :status="state.status"
        icon-type="flower"
        margin-top="30"
        margin-bottom="30"
      />
    </scroll-view>
  </view>
  <!-- <u-mask :show="state.show"></u-mask>
  <lFenxiang></lFenxiang> -->
</template>
<script lang="ts" setup>
// import lFenxiang from '@/components/l-fenxiang/l-fenxiang.vue'
import {
  getInviteRuleInfo,
  getMyInviteList,
  getInviteList
} from '@/api/modules/user'
import { reactive, onMounted } from 'vue'

const state = reactive({
  show: false,
  customStyle: {
    backgroundImage: 'linear-gradient(to right, #7e50d7, #2138cd)',
    color: '#fff'
  },
  olist: [
    {
      name: '排行榜'
    },
    {
      name: '我的'
    }
  ],
  tabCurrent: 0,
  status: 'loadmore',
  list: [] as any,
  page: 0,
  inviteRuleInfo: {} as any
})
onMounted(() => {
  getInviteRuleInfo().then((result) => {
    state.inviteRuleInfo = result.data
  })
  bottomOut()
})
//邀请
const invite = () => {
  uni.navigateTo({
    url: `/pages/my/invite-friends/l-fenxiang/l-fenxiang`
  })
}
const change = (index: number) => {
  state.status = 'loadmore'
  state.list = []
  state.page = 0
  state.tabCurrent = index
  bottomOut()
}
//触底加载数据
const bottomOut = () => {
  if (state.status === 'nomore') return
  state.status = 'loading'
  state.page = ++state.page
  const promise =
    state.tabCurrent === 0
      ? getInviteList({ page: state.page, page_size: 30 })
      : getMyInviteList({ page: state.page, page_size: 30 })

  promise.then((result) => {
    state.list.push(...result.data.data)
    if (result.data.data.length < 30) state.status = 'nomore'
    else state.status = 'loading'
  })
}
</script>
<style lang="less" scoped>
.bottom-content {
  width: 100%;
  background-color: #f3f6fd;
  .percent {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 30rpx;
    margin: 10rpx 20rpx;
    border-radius: 20rpx;
    .text {
      line-height: 40rpx;

      .pre {
        margin-left: 20rpx;
        font-weight: 500;
        padding: 0 10rpx;
        font-size: 20rpx;
        background-color: #7e61df;
        color: #fff;
        border-radius: 20rpx;
      }
    }
    .bottom-text {
      color: rgb(145, 145, 145);
      font-size: 20rpx;
    }
  }
}
::v-deep(.u-hairline-border) {
  ::after {
    border: none !important;
  }
}
.top-content {
  padding: 30rpx;
  border-radius: 30rpx;

  .main-c {
    position: relative;
    background-color: #2b2f3b;
    color: #fff;
    padding: 30rpx;
    .top {
      font-size: 35rpx;
      font-weight: 600;
    }
    .button {
      position: absolute;
      right: 20rpx;
      top: 60rpx;
    }
  }
}
</style>
